<template>
    <el-form ref="menuFormRef" :rules="rules" :model="menuForm" label-width="100px">
        <!-- 菜单名称 -->
        <el-form-item :label="modular === 'master' ? '主菜单名称' : '子菜单名称'" prop="name">
            <el-input v-model="menuForm.name" />
        </el-form-item>

        <!-- 菜单类型 -->
        <el-form-item label="主菜单类型" prop="menuType" v-if="modular === 'master'">
            <el-radio-group v-model="menuForm.menuType">
                <el-radio :label="false">不配置子菜单</el-radio>
                <el-radio :label="true">配置子菜单</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="" v-if="menuForm.menuType && modular === 'master'">
            <slot></slot>
        </el-form-item>

        <template v-if="!menuForm.menuType">
            <!-- 跳转链接 -->
            <el-form-item label="跳转链接" prop="visitType">
                <el-radio-group v-model="menuForm.visitType">
                    <el-radio label="view">网页</el-radio>
                    <el-radio label="miniprogram">小程序</el-radio>
                </el-radio-group>
            </el-form-item>

            <!-- 网址 -->
            <el-form-item label="网址" prop="url">
                <el-input v-model="menuForm.url" />
            </el-form-item>

            <template v-if="menuForm.visitType == 'miniprogram'">
                <!-- AppId -->
                <el-form-item label="AppId" prop="appId">
                    <el-input v-model="menuForm.appId" />
                </el-form-item>

                <!-- 路径 -->
                <el-form-item label="路径" prop="pagePath">
                    <el-input v-model="menuForm.pagePath" />
                </el-form-item>
            </template>
        </template>
    </el-form>
</template>

<script>
export default {
    props: {
        modular: {
            type: String,
            default: 'master'
        },
        name: {
            type: String,
            default: ''
        },
        menuType: {
            type: Boolean,
            default: false
        },
        visitType: {
            type: String,
            default: 'view'
        },
        url: {
            type: String,
            default: ''
        },
        appId: {
            type: String,
            default: ''
        },
        pagePath: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            menuForm: { ...this.$props },
            rules: {
                name: [
                    {
                        required: true,
                        message: '必填项不能为空',
                        trigger: ['blur', 'change']
                    },
                    {
                        min: 1,
                        max: 12,
                        message: '长度限制12个字符',
                        trigger: ['blur', 'change']
                    }
                ],
                menuType: [
                    {
                        required: true,
                        message: '必填项不能为空',
                        trigger: ['blur', 'change']
                    }
                ],
                visitType: [
                    {
                        required: true,
                        message: '必填项不能为空',
                        trigger: ['blur', 'change']
                    }
                ],
                url: [
                    {
                        required: true,
                        message: '必填项不能为空',
                        trigger: ['blur', 'change']
                    }
                ],
                appId: [
                    {
                        required: true,
                        message: '必填项不能为空',
                        trigger: ['blur', 'change']
                    }
                ],
                pagePath: [
                    {
                        required: true,
                        message: '必填项不能为空',
                        trigger: ['blur', 'change']
                    }
                ]
            }
        }
    },
    watch: {
        $props: {
            handler(newValue) {
                this.menuForm = { ...newValue }
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        handleEmit() {
            this.$emit('update:name', this.menuForm.name)
            this.$emit('update:menuType', this.menuForm.menuType)
            this.$emit('update:visitType', this.menuForm.visitType)
            this.$emit('update:url', this.menuForm.url)
            this.$emit('update:appId', this.menuForm.appId)
            this.$emit('update:pagePath', this.menuForm.pagePath)
        }
    },
    mounted() {
        this.$watch(
            () => this.menuForm.modular,
            (newModular) => {
                if (newModular === 'master') {
                    this.$emit('update:menuType', this.menuForm.menuType)
                }
                this.handleEmit()
            }
        )
        this.$watch(
            () => this.menuForm,
            () => {
                this.handleEmit()
            },
            { deep: true }
        )
    }
}
</script>